<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>网页制作</title>
    <!--启用 IE Edge 模式,ie和Edge渲染相同-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="Keywords" content="高级网页制作">
    <meta name="Description" content="计算机工程学院">
    <link rel="stylesheet" type="text/css" href="css/homepage.css">
</head>

<body>
    <!--网页的第一张背景-->
    <div id="first-bk" class="position-ab"></div>
    <!--页面最底部的内容-->
    <div id="header">
    <!--头部左侧内容-->
    <div class="header-left fl">
    <ul>
    <li>
    <a href="#"><img src="img/uiz1.png"></a>
    </li>
    <li class="margin-l60"><a href="#">实战</a></li>
    <li><a href="https://www.runoob.com/">路径</a></li>
    <li><a href="https://www.runoob.com/">案例</a></li>  
    <li><a href="https://www.runoob.com/">猿问</a></li>  
    <li><a href="https://www.runoob.com/">手记</a></li>
    </ul>
    </div>
    <!-- 头部右侧内容 -->
    <div class="header-right fr">
    <!-- 输入框 -->
    <div class="search-bar margin-r60 fl position-re">
    <div id="searchOption">
    <a class="search-prompt position-ab" href="#">前端小白</a>
    <a class="search-prompt position-ab left-70" href="#">Java入门</a>
    </div>
    <input id="searchInput" type="text">
    <a href="#"><img class="search-prompt position-ab top-30 right-0" src="img/uiz4.png"></a>
    </div>
    <ul class="login-register fl">
    <li><a href="#">登录</a></li>
    <li><a href="#">注册</a></li>
    </ul>
    </div>
    </div>
    <div id="content" class="main position-re">
    <!-- 轮播图 -->
    <div class="bg-carousel position-ab">
    <!-- 存放轮播图切换所需的图片 -->
    <div id='list' class="pic position-re" style="left:-1200px;">
    <!-- 当前左边距为0，left=0，当轮播图左切换到left=0时，马上把left=-3600 -->
    <img src="img/uiz23.jpg">
    <img src="img/uiz21.jpg">
    <img src="img/uiz22.jpg">
    <!-- left = -3600 -->
    <img src="img/uiz23.jpg">
    <!-- left = -4800 当轮播图右切换到了他= -4800时，马上把left = -1200 -->
    <img src="img/uiz21.jpg">
    </div>
    </div>
    <!-- 轮播图的切换按钮 -->
    <div class="pic-module">
    <a id="next" class="prev right-0" href="#">&gt;</a>
    <a id="prev" class="next" href="#">&lt;</a>
    </div>
    <!-- 轮播图左侧的切换菜单 -->
    <div class="menuwrap">
    <ul>
    <li class="menuwrap-option">
    <a href="#">前端开发<span class="menu-arrow"></span></a>
    <!-- 隐藏的div，鼠标移至菜单div显示 -->
    <div class="inner-box img-backg15">
    <!-- 分类目录 -->
    <div class="sort-list">
    <h4 class="title">分类目录</h4>
    <ul>
    <li>
    <span class="fl">基础：</span>
    <div class="tag-box">
    <a href="#">HTML/CSS</a>/
    <a href="#">JavaScript</a>/
    <a href="#">jQuery</a>
    </div>
    </li>
    <li>
    <span class="fl">进阶 :</span>
    <div class="tag-box">
    <a href="#">Html5</a>/
    <a href="#">CSS3</a>/
    <a href="#">Node.js</a>/
    <a href="#">AngularJS</a>/
    <a href="#">Bootstrap</a>/
    <a href="#">React</a>/
    <a href="#">Sass/Less</a>/
    <a href="#">Vue.js</a>/
    <a href="#">WebApp</a>
    </div>
    </li>
    <li>
    <span>其他 :</span><a href="#">前端工具</a>
    </li>
    </ul>
    </div>
    <!--课程的推荐-->
    <div class="course-recommend">
    <h4 class="title">分类目录</h4>
    <p class="path-recom">
    <a href="#"><span class="cate-tag">职业路径
    </span> 前端小白手册</a>
    </p>
    <p class="path-recom">
    <a href="#"><span class="cate-tag">职业路径
    </span> HTML5与CSS3实现动态网页</a>
    </p>
    <p>
    <a href="#"><span class="cate-tag">实战</span> Vue2.0高级实战-开发移动端音乐App</a>
    </p>
    <p>
    <a href="#"><span class="cate-tag">实战</span> Web前后端漏洞分析与防御</a>
    </p>
    <p>
    <a href="#"><span class="cate-tag">课程</span> 携程C4技术分享沙龙</a>
    </p>
    </div>
    </div>
    </li>
    <li class="menuwrap-option">
    <a href="#">后端开发<span class="menuarrow"></span></a>
    <!--隐藏的div，鼠标移至菜单div显示内容暂时为空，减少代码量-->
    <div class="inner-box img-backg16">
        <div class="sort-list">
    <h4 class="title">项目案例</h4>
    <ul>
    <li>
    <span class="fl">基础：</span>
    <div class="tag-box">
    <a href="#">ssm案例</a>.
    <a href="#">ssh案例</a>
    <hr></hr>
    </div>
    </li>
    <li>
    <span class="fl">进阶 :</span>
    <div class="tag-box">
    <a href="#">spring</a>/
    <a href="#">mvc</a>/
    <a href="#">ssm</a>/
    <a href="#">ssh</a>/
    <a href="#">spring boot</a>

    </div>
    </li>
    <li>
    <span>其他 :</span><a href="#">myeclipse</a>
    </li>
    </ul>
    </div>
    </div>
     
    </li>
    <li class="menuwrap-option">
    <a href="#">移动开发<span class="menuarrow"></span></a>
    <div class="inner-box img-backg17">
       <div class="sort-list">
    <h4 class="title">项目案例</h4>
    <ul>
    <li>
    <span class="fl">基础：</span>
    <div class="tag-box">
    <a href="#">ssm案例</a>.
    <a href="#">ssh案例</a>
    <hr></hr>
    </div>
    </li>
    <li>
    <span class="fl">进阶 :</span>
    <div class="tag-box">
    <a href="#">spring</a>/
    <a href="#">mvc</a>/
    <a href="#">ssm</a>/
    <a href="#">ssh</a>/
    <a href="#">spring boot</a>

    </div>
    </li>
    <li>
    <span>其他 :</span><a href="#">myeclipse</a>
    </li>
    </ul>
    </div>
    </div>
    </li>
    <li class="menuwrap-option">
    <a href="#">数据库<span class="menuarrow"></span></a>
    <div class="inner-box img-backg18">
       <div class="sort-list">
    <h4 class="title">项目案例</h4>
    <ul>
    <li>
    <span class="fl">基础：</span>
    <div class="tag-box">
    <a href="#">ssm案例</a>.
    <a href="#">ssh案例</a>
    <hr></hr>
    </div>
    </li>
    <li>
    <span class="fl">进阶 :</span>
    <div class="tag-box">
    <a href="#">spring</a>/
    <a href="#">mvc</a>/
    <a href="#">ssm</a>/
    <a href="#">ssh</a>/
    <a href="#">spring boot</a>

    </div>
    </li>
    <li>
    <span>其他 :</span><a href="#">myeclipse</a>
    </li>
    </ul>
    </div></div>
    </li>
    <li class="menuwrap-option">
    <a href="#">云计算&大数据<span
    class="menu-arrow"></span></a>
    <div class="inner-box img-backg19">
       <div class="sort-list">
    <h4 class="title">项目案例</h4>
    <ul>
    <li>
    <span class="fl">基础：</span>
    <div class="tag-box">
    <a href="#">ssm案例</a>.
    <a href="#">ssh案例</a>
    <hr></hr>
    </div>
    </li>
    <li>
    <span class="fl">进阶 :</span>
    <div class="tag-box">
    <a href="#">spring</a>/
    <a href="#">mvc</a>/
    <a href="#">ssm</a>/
    <a href="#">ssh</a>/
    <a href="#">spring boot</a>

    </div>
    </li>
    <li>
    <span>其他 :</span><a href="#">myeclipse</a>
    </li>
    </ul>
    </div></div>
    </li>
    <li class="menuwrap-option">
    <a href="#">运维和测试<span class="menuarrow"></span></a>
    <div class="inner-box img-backg20">
       <div class="sort-list">
    <h4 class="title">项目案例</h4>
    <ul>
    <li>
    <span class="fl">基础：</span>
    <div class="tag-box">
    <a href="#">ssm案例</a>.
    <a href="#">ssh案例</a>
    <hr></hr>
    </div>
    </li>
    <li>
    <span class="fl">进阶 :</span>
    <div class="tag-box">
    <a href="#">spring</a>/
    <a href="#">mvc</a>/
    <a href="#">ssm</a>/
    <a href="#">ssh</a>/
    <a href="#">spring boot</a>

    </div>
    </li>
    <li>
    <span>其他 :</span><a href="#">myeclipse</a>
    </li>
    </ul>
    </div></div>
    </li>
    <li class="menuwrap-option">
    <a href="#">UI设计<span class="menuarrow"></span></a>
    <div class="inner-box img-backg21">
       <div class="sort-list">
    <h4 class="title">项目案例</h4>
    <ul>
    <li>
    <span class="fl">基础：</span>
    <div class="tag-box">
    <a href="#">ssm案例</a>.
    <a href="#">ssh案例</a>
    <hr></hr>
    </div>
    </li>
    <li>
    <span class="fl">进阶 :</span>
    <div class="tag-box">
    <a href="#">spring</a>/
    <a href="#">mvc</a>/
    <a href="#">ssm</a>/
    <a href="#">ssh</a>/
    <a href="#">spring boot</a>

    </div>
    </li>
    <li>
    <span>其他 :</span><a href="#">myeclipse</a>
    </li>
    </ul>
    </div></div>
    </li>
    </ul>
    </div>
    </div>
    <!--轮播图下方的图片-->
    <div id="pathBanner" class="path-banner">
    <a href="#"><img src="img/path_1.png"></a>
    <a href="#"><img src="img/path_2.png"></a>
    <a href="#"><img src="img/path_3.png"></a>
    <a href="#"><img src="img/path_4.png"></a>
    <a href="#"><img src="img/path_5.png"></a>
    </div>
    <div id="footer">
    <!--页面底部的图片-->
    <div class="footer-sns text-c">
    <a class="weibo-img" href="#"></a>
    <a class="wechat-img position-re"
    href="#">
    <!--鼠标移至二维码（微信）显示-->
    <span class="footer-sns-weixin-expand position-ab"><img src="img/idx-btm.png"></span>
    </a>
    <a class="tengxun-img" href="#"></a>
    <a class="qq-space-img" href="#"></a>
    </div>
    <!--友情链接-->
    <div class=" text-c footer-link">
    <a href="#">关于我们</a>
    <a href="#">企业合作</a>
    <a href="#">人才招聘</a>
    <a href="#">讲师招募</a>
    <a href="#">联系我们</a>
    <a href="#">意见反馈</a>
    <a href="#">友情链接</a>
    </div>
    <div class="footer-copyright text-c">
    <span>© 2016 imoroc.com 京ICP备13042132号
    </span>
    </div>
    </div>
    
         
</body>
<!--
    HTML文件是从上往下解析,即先执行head标签里的内容，再执行body标签里面内容
    js放在body,等页面解析浏览器解析完html，css(渲染)之后再加载js文件
    使浏览器等待响应用户输入的时间变短
-->
<script type="text/javascript" src="js/jQuery1.8.js"></script>
<script type="text/javascript" src="js/homepage.js"></script>

</html>